<template>
  <view class="container">
    <!-- 地图区域 -->
    <view class="map-container">
      <map
        id="map"
        class="map"
        :latitude="mapCenter.latitude"
        :longitude="mapCenter.longitude"
        :markers="markers"
        show-location
        @markertap="onMarkerTap"
      ></map>
      <view class="nearby-stores" @tap="toSearch">
        <text class="nearby-text">附近门店 ></text>
      </view>
    </view>

    <!-- 门店信息卡片 -->
    <view class="store-info-card">
      <view class="store-header">
        <text class="store-name">伟业汽车保养场(人民路店)</text>
        <text class="distance">44m</text>
      </view>
      <view class="store-rating">
        <uni-rate
          class="rating-stars"
          :value="storeInfo.rating"
          :readonly="true"
          :size="16"
        />
        <text class="rating-text">{{ storeInfo.rating }}分</text>
      </view>
      <view class="store-hours">
        <text class="hours-text">营业时间: 周一至周五 09:00-22:00</text>
      </view>
      <view class="store-address">
        <text class="address-text">山阳区人民中路32号</text>
      </view>

      <view class="store-actions">
        <button class="contact-btn" @click="contactStore">联系门店</button>
        <button class="book-btn" @click="bookAppointment">立即预定</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
// import uniRate from '@dcloudio/uni-ui/lib/uni-rate/uni-rate.vue';

// 地图中心坐标
const mapCenter = reactive({
  latitude: 39.9042, // 北京市的纬度
  longitude: 116.4074 // 北京市的经度
});

// 标记点数据
const markers = ref([
  {
    id: 1,
    latitude: 39.9042,
    longitude: 116.4074,
    iconPath: '/static/map-marker.png',
    width: 30,
    height: 30
  },
  // 可以添加更多标记点
]);


// 门店信息
const storeInfo = reactive({
  name: '伟业汽车保养场(人民路店)',
  distance: '44m',
  rating: 3,
  hours: '周一至周五 09:00-22:00',
  address: '山阳区人民中路32号'
});

// 标记点击事件
const onMarkerTap = (e) => {
  const markerId = e.detail.markerId;
  // 根据标记ID获取对应门店信息并展示
  console.log('Marker tapped:', markerId);
};

const toSearch = (e)=>{
	console.log("跳转附近店铺")
	 uni.navigateTo({
			url:"/packageIndex/car-service/car-service-search/car-service-search"
	  })
}

// 联系门店
const contactStore = () => {
  console.log('Contact store');
  // 实现联系门店逻辑，如拨打电话等
};

// 预约服务
const bookAppointment = () => {
  console.log('Book appointment');
  // 实现预约逻辑，如跳转到预约页面等
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.map-container {
  position: relative;
  width: 100%;
  height: 70%;
}

.map {
  width: 100%;
  height: 100%;
}

.nearby-stores {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 10px 15px;
  border-radius: 20px;
}

.nearby-text {
  font-size: 16px;
}

.store-info-card {
  width: 100%;
  height: 30%;
  background-color: white;
  padding: 20px;
  box-sizing: border-box;
}

.store-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.store-name {
  font-size: 18px;
  font-weight: bold;
}

.distance {
  color: #4caf50;
}

.store-rating {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.rating-stars {
  margin-right: 5px;
}

.rating-text {
  font-size: 14px;
}

.store-hours {
  margin-bottom: 10px;
}

.hours-text {
  font-size: 14px;
  color: #666;
}

.store-address {
  margin-bottom: 20px;
}

.address-text {
  font-size: 14px;
  color: #666;
}

.store-actions {
  display: flex;
  justify-content: space-between;
}

.contact-btn {
  flex: 1;
  background-color: #f5f5f5;
  color: #333;
  border: none;
  padding: 10px 0;
  border-radius: 20px;
}

.book-btn {
  flex: 1;
  background-color: #ff5722;
  color: white;
  border: none;
  padding: 10px 0;
  border-radius: 20px;
  margin-left: 10px;
}
</style>